<template>
	<view class="page-body" :class="[app.setCStyle(from)]">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" v-model="addressData.consignee" placeholder-class="line" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="number" v-model="addressData.mobile" placeholder-class="line" placeholder="请填写收货人手机号" />
			</view>

			<!-- 四级省市区 -->
			<view class="item" @tap="showUniAddressSelector = true;">
				<view class="left">所在地区</view>
				<input disabled type="text" v-model="addressData.merger_name" placeholder-class="line"
					placeholder="省市区县" />
				<text class="right-arrow"></text>
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" v-model="addressData.address" placeholder-class="line"
					placeholder="详细地址：如道路、小区、栋楼号等" />
			</view>
			<view class="isdefault">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">每次下单会默认推荐该地址</view>
				</view>
				<view class="right">
					<u-switch v-model="addressData.is_default" active-color="#fc4a5b"></u-switch>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<!-- 四级省市区 -->
		<UniAddressSelector v-if="showUniAddressSelector" :areaInfoSelected="areaInfoObj" @cancel="handleCancel"
			@confirm="handleConfirm">
		</UniAddressSelector>
		<button type="warning" shape="circle" class="fs30 bottom-btn primarybtn" @click="submit">
			提交
		</button>
	</view>
</template>
<script>
	// 四级省市区
	import UniAddressSelector from '@/components/UniAddressSelector';
	export default {
		components: {
			UniAddressSelector
		},
		data() {
			return {
				from: '',
				addressData: {},
				isLoading: false,

				// 四级省市区
				showUniAddressSelector: false,
				areaInfoObj: {
					fullAreaTextInitial: '',
					provinceObj: {
						id: '',
						name: '',
					},
					cityObj: {
						id: '',
						name: '',
					},
					cityObj: {
						id: '',
						name: '',
					},
					areaObj: {
						id: '',
						name: '',
					},
					streetObj: {
						id: '',
						name: '',
					},
				}
			}
		},
		onLoad(options) {
			this.app.isLogin(this); //强制登陆
			this.from = options.from;

			let title = '新增收货地址';
			if (options.type === 'edit') {
				title = '编辑收货地址'
				this.addressData = JSON.parse(options.data);
				this.addressData.regionIds = [
					this.addressData.province,
					this.addressData.city,
					this.addressData.district,
					this.addressData.street
				].join(',')
				if (this.addressData.is_default == 1) {
					this.addressData.is_default = true;
				} else {
					this.addressData.is_default = false;
				}
				// 四级省市区：传值给控件
				let splitFullAreaTextInitial = this.addressData.merger_name.split(',')
				this.areaInfoObj.fullAreaTextInitial = this.addressData.merger_name;
				this.areaInfoObj.provinceObj = {id: this.addressData.province, name: splitFullAreaTextInitial[0] || ''}
				this.areaInfoObj.cityObj = {id: this.addressData.city, name: splitFullAreaTextInitial[1] || ''}
				this.areaInfoObj.areaObj = {id: this.addressData.district, name: splitFullAreaTextInitial[2] || ''}
				this.areaInfoObj.streetObj = {id: this.addressData.street, name: splitFullAreaTextInitial[3] || ''}
			}
			this.manageType = options.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			switchChange(e) {
				this.addressData.is_default = e.detail;
			},

			//提交
			submit() {
				if (this.isLoading == true) {
					return false;
				}
				let data = this.addressData;
				if (!data.consignee) {
					this.$refs.uToast.show({
						title: `请填写收货人姓名`,
						type: 'error',
						position: 'top'
					});
					return;
				}
				if (!/(^1[0-9]{10}$)/.test(data.mobile)) {
					this.$refs.uToast.show({
						title: `请输入正确的手机号码`,
						type: 'error',
						position: 'top'
					});
					return;
				}
				if (!data.address) {
					this.$refs.uToast.show({
						title: `请输入详细地址.`,
						type: 'error',
						position: 'top'
					});
					return;
				}
				this.isLoading = true;
				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
				var pages = getCurrentPages(); //当前页
				var beforePage = pages[pages.length - 2]; //上个页面
				var url = this.manageType == 'edit' ? 'member/api.address/edit' : 'member/api.address/add';
				this.$u.post(url, data).then(res => {
					this.isLoading = false;
					this.$refs.uToast.show({
						title: `地址${this.manageType=='edit' ? '修改': '添加'}成功`,
						type: 'success',
						position: 'top'
					})
					uni.setStorageSync("address_id", res.data.address_id);
					setTimeout(() => {
						if (beforePage.route == 'pages/shop/flow/checkOut') {
							beforePage.$vm.getAddress();
						}
						// beforePage.getAddress();
						uni.navigateBack();
					}, 800)
				}).catch(res => {
					this.isLoading = false;
				})
			},

			// 四级省市区
			handleCancel() {
				this.showUniAddressSelector = false;
			},
			handleConfirm(areaInfoObj) {
				this.showUniAddressSelector = false;
				this.areaInfoObj = areaInfoObj;

				//显示文字到空控件上
				this.addressData.merger_name = areaInfoObj.fullAreaTextInitial
				this.addressData.regionIds = [
					areaInfoObj.provinceCode,
					areaInfoObj.cityCode,
					areaInfoObj.areaCode,
					areaInfoObj.streetCode
				].join(',');
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .line {
		color: $u-light-color;
		font-size: 28rpx;
	}

	.page-body {
		.top {
			background-color: #ffffff;
			border-top: solid 2rpx $border-color-light;
			padding: 30rpx;

			.item {
				display: flex;
				font-size: 28rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $border-color-light;
				position: relative;

				.left {
					width: 180rpx;
				}

				input {
					text-align: left;
					font-size: 28rpx;
				}
			}

			.right-arrow {
				display: inline-block;
				width: 16rpx;
				height: 16rpx;
				border-top: 1rpx solid #666666;
				border-right: 1rpx solid #666666;
				transform: rotate(45deg);
				position: absolute;
				right: 0;
			}

			.address {
				padding: 20rpx 0;

				textarea {
					// width: 100%;
					height: 100rpx;
					line-height: 50rpx;
					padding: 0 40rpx;
					font-size: 28rpx;
				}
			}

			.site-clipboard {
				padding-right: 40rpx;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}

				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $u-tips-color;
					height: 80rpx;

					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}

			.isdefault {
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;

				.tips {
					font-size: 24rpx;
					color: #999999;
				}

				.right {}
			}
		}

	}
</style>